<style lang="less">
  .popupBox{
    .el-dialog--small{
      min-height: 450px;
      .el-dialog__header {
        padding: 10px 20px 10px;
        background-color: #f6f6f6;
        border-radius: 2px 2px 0 0;
      }
      .el-dialog__body{
        position: absolute;
        text-align: center;
        height: 90%;
        width: 100%;
        top: 40px;
        .cont{ // step 1
          position: absolute;
          width: 100%;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          .el-input-group{
            width: 80%;
            .el-input__inner{
                background-color: #fff;
                color: #333;
              }
            .el-input-group__append{
              color: #fff;
              width: 20%;
              border-color: #f7931e;
              background-color: #f7931e;
            }
          }
          .tips{
            height: 2rem;
            color: red;
            width: 80%;
            text-align: left;
            margin-left: 10%;
            line-height: 1.5rem;
            font-size: 14px;
            padding: 3px 5px;
          }
          .formDataBox{
            overflow: auto;
            width: 96%;
            margin-left: 2%;
            position: relative;
            margin-top: 1rem;
            .el-table {
              font-size: 10px;
              line-height: 15px;
              .warning-row {
                color: red;
              }
              th {
                background-color: #fff;
                .cell{
                  background-color: #fff;
                  font-size: 10px;
                  line-height: 15px;
                  padding: 0 10px;
                }
              }
              .cell{
                font-size: 10px;
                line-height: 15px;
                padding: 0 10px;
              }
            }
          }
        }
        .importBtn{
          width: 10rem;
          margin: 2rem 3rem;
        }
        .plainBtn{
          border: 1px solid #63c5ce;
          color: #63c5ce;
        }
      }
    }
    .innerDialog{
      min-height: 50%;
      .el-dialog__header{
        display: none;
      }
      .el-dialog__body{
        top: 20px;
        .innerDialog-msg{
          margin-bottom:2rem; 
        }
        .el-button--text{
          color: #999;
          border-bottom: 1px solid #e9e9e9;
          border-radius: 0;
          padding-bottom: 3px;
          border-color: #ddd;
        }
      }
    }
  }

</style>

<template>
  <div class="popupBox">
    
    <el-dialog 
      top='20%'
      :before-close='closeSelf'
      :close-on-click-modal=false
      :title="dialogTitle[viewType]" 
      :visible.sync="isVisible">

      <div class="cont" v-show="viewType==1 && propViewType != 3">
        <el-input placeholder="请输入内容" v-model="path" :disabled="true">
          <el-upload
            ref='upload'
            slot="append"
            class="upload-demo"
            :show-file-list='false'
            :multiple='false'
            :auto-upload="false"
            :http-request='ajaxMatchAgain'
            :action='""'
            name='filename'
            accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
            :on-change='handleChange'>
            <el-button size="small" type="warning">浏览</el-button>
          </el-upload>
        </el-input>
        <div class='tips'>{{msg}}</div>
        <div>
          <el-button type='primary' class="importBtn" @click='submitUpload' :loading="uploadExcelLoading"> 导入名单</el-button>
        </div>
      </div>

      <div class="cont" v-if="viewType == 2 || propViewType == 3">
        <div class="formDataBox">
           <el-table
            :data="respFormData"
            height="300"
            v-loading="formLoading"
            :row-class-name="tableRowClassName"
            border
            style="width: 100%">
            <el-table-column label="投资人信息">
              <el-table-column
                prop="orderId"
                label="订单号"
                width="defaultWidth.num">
              </el-table-column>
              
              <el-table-column
                prop="investorName"
                label="投资人姓名"
                width="defaultWidth.name">
              </el-table-column>

              <el-table-column
                prop="investorMobile"
                label="投资人手机号"
                width="defaultWidth.tel">
              </el-table-column>

              <el-table-column
                prop="investorNo"
                label="投资人身份证号码"
                width="defaultWidth.num">
              </el-table-column>

              <el-table-column
                prop="investorAmount"
                label="投资金额"
                width="defaultWidth.money">
              </el-table-column>
            </el-table-column>

            <el-table-column label="借款人信息">
              <el-table-column
                prop="assetsId"
                label="资产ID"
                width="defaultWidth.id">
              </el-table-column>

              <el-table-column
                prop="borrowerName"
                label="借款人姓名"
                width="defaultWidth.name">
              </el-table-column>

              <el-table-column
                prop="borrowerNo"
                label="借款人身份证号码"
                width="defaultWidth.num">
              </el-table-column>

              <el-table-column
                prop="borrowerMobile"
                label="借款人手机号码"
                width="defaultWidth.tel">
              </el-table-column>

              <el-table-column
                prop="borrowerAmount"
                label="放款金额"
                width="defaultWidth.money">
              </el-table-column>

              <el-table-column
                prop="boanTime"
                label="放款时间"
                width="defaultWidth.date">
              </el-table-column>
            </el-table-column>
          </el-table>
        </div>
        

        <div v-if="propViewType != 3">
          <el-button class="importBtn plainBtn" :loading="uploadExcelLoading" @click='ajaxMatchAgain' > 重新匹配</el-button>
          <el-button type='primary' class="importBtn" :loading="confirmLoading" @click='ajaxConfirm(false)'  v-if='canSave'>确认生成</el-button>
          <el-button class="importBtn plainBtn" @click='importAgain'>重新导入名单</el-button>
        </div>

        <div v-if="propViewType ==3">
          
          <el-button type='primary' class="importBtn" @click='exportExcel'>导出</el-button>
        </div>
      </div>


      <el-dialog
        width="30%"
        :close-on-click-modal=false
        :custom-class="innerDialog.customClass"
        :visible="innerDialog.innerVisible"
        :show-close='innerDialog.showClose'
        :modal='innerDialog.modal'
        append-to-body>
        <div class="innerDialog-msg">
          是否确认生成匹配名单，确认后无法进行重新匹配。如需修改，请重新上传名单进行匹配，此份将失效
        </div>
        <el-button type='primary' @click='ajaxConfirm(true)'>确认无误</el-button>
        <br/>
        <el-button type='text' @click='closeInnerVisible'>我在想想</el-button>
      </el-dialog> 
    </el-dialog>

  </div>
</template>

<script>
  import {api, postUploadExcel, getMatchList} from 'api/creditor'
  import {postLog} from 'api/common'
  export default {
    props:[ 'propViewType', 'isVisible', 'productCode', 'productId','productName'],
    data(){
      return{
        dialogTitle:['','导入匹配的名单', '导入结果'],
        viewType:1,//1导入 2匹配结果 3查看
        path:'',//页面显示的excel名字
        defaultWidth:{
          name:'80',
          tel:'100',
          num:'120',
          money:'80',
          id:'120',
          date:'80',
        },
        uploadExcel:{},//要上传的表格
        uploadExcelLoading:false,
        confirmLoading:false,
        formLoading:false,//查看名单的时候，要查询表格数据！
        msg:'',//上传报错的提示文字
        canSave:true,//数据错误时要看匹配的结果（这里会表示出错误的行），但是这里不能保存！
        respFormData:[],//返回的匹配结果
        innerDialog:{
          innerVisible:false,
          customClass:'innerDialog',
          showClose:false,
          modal:false,
        }
      }
    },
    methods:{
      tableRowClassName(row, rowIndex){
        //匹配失败的行要标示出来！
        let className = row.markHigh ? 'warning-row':''
        return className

      },
      closeInnerVisible(){
        this.innerDialog.innerVisible =false;

      },
      handleChange(file, fileList){
        console.log('handleChange', file);
        this.msg ='';
        this.uploadExcel = file;
        this.path = file && file.name ? file.name :'';
      },
      submitUpload() {
        // console.log(this.uploadExcel)
        if(!(this.uploadExcel && this.uploadExcel.name) ) this.msg = '请先选择要上传的表格！'
        this.$refs.upload.submit();
      },
      ajaxMatchAgain(){
        console.log('名单匹配')
        if(!this.uploadExcelLoading && !this.confirmLoading){
          this.uploadExcelLoading = true;
          this.postUploadExcel(2)
        }
      },
      ajaxConfirm(again){ //生成后不能二次更改，这里需要双层验证！
        console.log('确认生成',again)
        if(again){
          if(!this.uploadExcelLoading && !this.confirmLoading){
            this.innerDialog.innerVisible = false;
            this.confirmLoading = true
            this.postUploadExcel(4)
          }
        }else{
          this.innerDialog.innerVisible = true;
          let innerDialog = document.getElementsByClassName('innerDialog')[0]
          innerDialog.parentNode.style.backgroundColor ='rgba(0,0,0,0.5)'
        }
      },
      importAgain() {
        console.log('重新导入名单')
        if(!this.uploadExcelLoading && !this.confirmLoading){
          this.viewType = 1;
          this.uploadExcel = {};
          this.path='';
        }
      },
      async postUploadExcel(type){
        try{
          let formData = new FormData();
          formData.append('filename', this.uploadExcel.raw);
          formData.append('userId', sessionStorage.getItem('HKid'));
          formData.append('productId', this.productId);
          formData.append('type', type);

          let back = await postUploadExcel(formData)
          back = back.data;
          console.log('postUploadExcel', back)
          this.uploadExcelLoading =false
          this.confirmLoading =false
          if(back && back.resultCode =='200'){
            //成功的要发送日志
            postLog('CREDITOR_MATCHING_LIST_IMPORT', this.productId, this.productName)
          }
          if(back && (back.resultCode =='200' || back.resultCode =='3001')){
            this.canSave = back.resultCode =='3001' ? false : true
            if(type ==2){
              this.respFormData = back.result;
              this.viewType = 2;

            }else{
              this.$alert('保存成功',{
                callback: action => {
                  this.$emit('reloadPage')
                  this.$emit('handleDialogVisible')
                }
              })
            }
          }else{
            this.msg = back.result
            this.respFormData = back.result;
            this.uploadExcel = '';
            this.path = '';
          }
        }catch(err){
          this.uploadExcelLoading =false
          this.confirmLoading =false
          this.uploadExcel = '';
          this.path = '';
          this.msg='失败！'
          this.$message.error('失败！');
          console.error(err)
        }
      },
      async getMatchList(){
        try{
          this.formLoading = true;
          let back = await getMatchList(this.productId)
          back = back.data;
          this.formLoading = false
          console.log('getMatchList',back)
          if(back && back.resultCode =='200'){
            this.respFormData = back.result
          }else{
            this.$alert(back.msg)
          }
        }catch(err){
          this.formLoading = false
          console.error(err)
        }
      },
      exportExcel(){
        window.location.href = `${api.getExportExcel}?productId=${this.productId}&userId=${sessionStorage.getItem('HKid')}`
      },
      closeSelf(done){
        this.$emit('handleDialogVisible')
      }
    },
    mounted () {
      if(this.propViewType ==3){
        this.getMatchList()
      }
      
    }
  }
</script>
